<script lang="ts" setup>
import daoBg from '@/assets/images/home/dao-bg.png';
import daoFeatureIcon1 from '@/assets/images/home/dao1.png';
import daoFeatureIcon2 from '@/assets/images/home/dao2.png';
import daoFeatureIcon3 from '@/assets/images/home/dao3.png';
import daoFeatureIcon4 from '@/assets/images/home/dao4.png';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
</script>

<template>
  <div class="dao-wrapper flex flex-column">
    <div
      class="dao-title"
      data-aos="fade-right"
      data-aos-offset="300"
      data-aos-easing="ease-in-sine"
    >
      {{ t('message.home.dao.title') }}
    </div>
    <div
      class="dao-intro"
      data-aos="fade-right"
      data-aos-offset="300"
      data-aos-easing="ease-in-sine"
    >
      {{ t('message.home.dao.intro') }}
    </div>
    <!--  TODO 气泡还没有做-->
    <div
      class="flex flex-row align-self-center dao-feature-wrapper"
      data-aos="fade-left"
      data-aos-offset="400"
    >
      <img :src="daoBg" class="dao-bg float-animation" alt="" />
      <div class="dao-feature-list flex-1">
        <div class="dao-feature-item">
          <img :src="daoFeatureIcon1" class="dao-feature-icon" alt="" />
          <div class="dao-feature">
            <div class="dao-feature-title">
              {{ t('message.home.dao.feature-title-1') }}
            </div>
            <div class="dao-feature-intro">
              {{ t('message.home.dao.feature-intro-1') }}
            </div>
          </div>
        </div>
        <div class="dao-feature-item">
          <img :src="daoFeatureIcon2" class="dao-feature-icon" alt="" />
          <div class="dao-feature">
            <div class="dao-feature-title">
              {{ t('message.home.dao.feature-title-2') }}
            </div>
            <div class="dao-feature-intro">
              {{ t('message.home.dao.feature-intro-2') }}
            </div>
          </div>
        </div>
        <div class="dao-feature-item">
          <img :src="daoFeatureIcon3" class="dao-feature-icon" alt="" />
          <div class="dao-feature">
            <div class="dao-feature-title">
              {{ t('message.home.dao.feature-title-3') }}
            </div>
            <div class="dao-feature-intro">
              {{ t('message.home.dao.feature-intro-3') }}
            </div>
          </div>
        </div>
        <div class="dao-feature-item">
          <img :src="daoFeatureIcon4" class="dao-feature-icon" alt="" />
          <div class="dao-feature">
            <div class="dao-feature-title">
              {{ t('message.home.dao.feature-title-4') }}
            </div>
            <div class="dao-feature-intro">
              {{ t('message.home.dao.feature-intro-4') }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.dao-wrapper {
  @apply mt-[162px] xs:mt-[56px] xs:mx-6 sm:mx-20 md:mx-10 lg:mx-[228px] xl:mx-[228px];
}

.dao-title {
  font-size: 72px;
  font-family: DINPro-Bold, DINPro;
  font-weight: bold;
  color: #161615;
  margin-bottom: 24px;
  @apply xs:text-[32px] xs:mb-4 xs:ml-[0] sm:ml-[120px] md:ml-[180px] xs:text-center;
}

.dao-intro {
  width: 582px;
  height: 64px;
  font-size: 16px;
  font-family: DINPro-Regular, DINPro;
  font-weight: 400;
  color: #7a7893;
  line-height: 26px;
  @apply xs:text-center xs:w-full xs:ml-[0] sm:ml-[120px] md:ml-[180px];
}

.dao-feature-wrapper {
  //@apply xl:mr-[228px] lg:mr-[138px] sm:mr-[58px];

  .dao-bg {
    width: 636px;
    height: 595px;
    object-fit: contain;
    margin-top: 178px;
    @apply xs:hidden sm:hidden md:w-[550px] md:h-[450px] xl:ml-[-160px] lg:ml-[-108px] md:ml-[-88px];
  }

  .dao-feature-list {
    .dao-feature-item {
      border-bottom: 1px solid #bed4ff;
      @apply flex flex-row items-center xs:flex-col;

      .dao-feature-icon {
        width: 190px;
        height: 190px;
        @apply md:w-[140px] md:h-[140px] sm:w-[120px] sm:h-[120px] xs:mt-[24px];
      }

      .dao-feature {
        .dao-feature-title {
          height: 72px;
          font-size: 32px;
          font-family: DINPro-Bold, DINPro;
          font-weight: bold;
          color: #161615;
          line-height: 60px;
          @apply mt-8 xs:text-center xs:mt-1 xs:mb-1 xs:text-xl xs:my-0;
        }

        .dao-feature-intro {
          font-size: 16px;
          font-family: DINPro-Regular, DINPro;
          font-weight: 400;
          color: #7a7893;
          line-height: 26px;
          @apply sm:mb-[20px] xs:mb-[24px] lg:mb-8 xl:mb-8;
        }
      }
    }
  }
}
</style>
